<script setup lang="ts">
import { QItem, QItemSection, QItemLabel } from "quasar";

import ComContainerAbMiddle from "../ComContainer/ComContainerAbMiddle.vue";
import ComIconTonOrderIndigo from "../ComIcon/ComIconTonOrderIndigo.vue";
import ComIconTonOrderSale from "../ComIcon/ComIconTonOrderSale.vue";
import ComIconTonOrderWare from "../ComIcon/ComIconTonOrderWare.vue";
import ComIconVoucher from "../ComIcon/ComIconVoucher.vue";
import { jumpBlank } from "../utils/view.tab";
</script>

<template>
  <div class="flex justify-center gap-3">
    <q-item
      class="app-buy-palette text-primary px-2 cursor-pointer rounded hover-text-accent"
      clickable
      @click="jumpBlank('https://buy.qqlx.ltd', 'qqlx_app_buy')"
    >
      <q-item-section avatar>
        <div class="relative w-12 h-12 rounded bg-primary">
          <ComContainerAbMiddle class="w-10 h-10">
            <ComIconTonOrderIndigo size="24px" class="text-white"></ComIconTonOrderIndigo>
          </ComContainerAbMiddle>
        </div>
      </q-item-section>
      <q-item-section>
        <q-item-label>蓝晶采购</q-item-label>
        <q-item-label caption>钢材采购系统</q-item-label>
      </q-item-section>
    </q-item>

    <q-item
      class="app-ware-palette text-primary px-2 cursor-pointer rounded hover:shadow-lg hover-text-accent"
      clickable
      @click="jumpBlank('https://ware.qqlx.ltd', 'qqlx_app_ware')"
    >
      <q-item-section avatar>
        <div class="relative w-12 h-12 rounded bg-primary">
          <ComContainerAbMiddle class="w-10 h-10">
            <ComIconTonOrderWare size="24px" class="text-white"></ComIconTonOrderWare>
          </ComContainerAbMiddle>
        </div>
      </q-item-section>
      <q-item-section>
        <q-item-label>琥珀库存</q-item-label>
        <q-item-label caption>钢材库存管理</q-item-label>
      </q-item-section>
    </q-item>

    <q-item
      class="app-sale-palette text-primary px-2 cursor-pointer rounded hover:shadow-lg hover-text-accent"
      clickable
      @click="jumpBlank('https://sale.qqlx.ltd', 'qqlx_app_sale')"
    >
      <q-item-section avatar>
        <div class="relative w-12 h-12 rounded bg-primary">
          <ComContainerAbMiddle class="w-10 h-10">
            <ComIconTonOrderSale size="24px" class="text-white"></ComIconTonOrderSale>
          </ComContainerAbMiddle>
        </div>
      </q-item-section>
      <q-item-section>
        <q-item-label>黑石销售</q-item-label>
        <q-item-label caption>钢材开单系统</q-item-label>
      </q-item-section>
    </q-item>

    <q-item
      class="app-voucher-palette text-primary px-2 cursor-pointer rounded hover:shadow-lg hover-text-accent"
      clickable
      @click="jumpBlank('https://voucher.qqlx.ltd', 'qqlx_app_voucher')"
    >
      <q-item-section avatar>
        <div class="relative w-12 h-12 rounded bg-primary">
          <ComContainerAbMiddle class="w-10 h-10">
            <ComIconVoucher size="24px" class="text-white"></ComIconVoucher>
          </ComContainerAbMiddle>
        </div>
      </q-item-section>
      <q-item-section>
        <q-item-label>翡翠财务</q-item-label>
        <q-item-label caption>专业财务系统</q-item-label>
      </q-item-section>
    </q-item>
  </div>
</template>
